import React, { memo } from 'react'
import { Pagination } from '@mui/material'

import { PaginationWrapper } from './style'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { fetchRoomsListAction } from '@/store/modules/entire/createActions'

const EntirePagination = memo(function EntirePagination(props) {
  const { totalCount } = useSelector(
    (state) => ({
      totalCount: state.entire.totalCount,
      currentPage: state.entire.currentPage,
      roomList: state.entire.roomList,
    }),
    shallowEqual
  )

  const totalPage = Math.ceil(totalCount / 20)

  const dispatch = useDispatch()
  function handleChange(event, value) {
    window.scrollTo(0, 0)
    dispatch(fetchRoomsListAction(value))
  }

  return (
    <PaginationWrapper>
      <Pagination
        count={totalPage}
        variant="outlined"
        onChange={handleChange}
      />
    </PaginationWrapper>
  )
})

export default EntirePagination
